<template>
  <div class="detailInfo" v-if="Object.keys(detailInfo).length !== 0">
        <div class="border border-top">
            <div class="dot1"></div>
        </div>
        <div class="word">{{detailInfo.desc}}</div>
        <div class="border border-bottom">
            <div class="dot2"></div>
        </div>
        
        <div class="detail-image" v-for="item,index in detailInfo.detailImage" :key="index">
            <div class="result">{{item.key}}</div>
            <div v-for="item in item.list" :key="item">
                <img :src="item" alt="" @load="imageLoad">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        detailInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        imageLoad() {
            this.$emit('imageLoad')
        }
    }
}
</script>

<style>
    
    .detailInfo{
        padding-bottom: 30px;
    }

    .border{
        width: 25%;
         border-bottom: 2px solid #a29e9e;
        
    }

    .border-top{
        /* margin: 0 0 13px 13px; */
        margin-left: 13px;
    }

    .border-bottom{
        float: right;
        /* margin: 13px 13px 0 0; */
        margin-right: 13px;
    }

    div[class^="dot"]{
        width: 5px;
        height: 5px;
        background: #000;
    }

    

    .dot2{
        float: right;
    }

    .word{
        margin: 13px;
        padding-top: 6px;
    }

    .result{
        margin: 28px 0 18px 13px;
        color: #333;
    }

    .detail-image img{
        width: 100%;
    }
</style>